<template>
	<view class="teacher">
		<view class="teacherlist" v-for="item in teacher" @click="teacherdetail(item)">
			<view class="teacherimg">
				<image :src="item.avatar" mode=""></image>
				
			</view>
			<view class="name">
				{{item.name}}
			</view>
			<view class="subjj">
				{{item.intro}}
			</view>
			
		</view>
	</view>
</template>

<script setup>

import { onMounted,ref } from 'vue';
import instance from '../../request';
const teacher=ref([]);
	onMounted(()=>{
		
		getlist()
	})
	const  getlist=async()=>{
		const res=await instance.get("/api/edu/teacher/1/10");
	console.log(res)
	teacher.value=res.data.items
	}
	const teacherdetail=(item)=>{
		uni.navigateTo({
			url:`/pages/teacherdetail/teacherdetail?id=${item.id}`
		})
	}

</script>

<style scoped>
	.subjj{
		font-size: 12px;
		color: #888;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:2 ;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	
	}
	.name{
		text-align: center;
		color: #4db5fb;
		padding-bottom: 15px;
		box-sizing: border-box;
		border-bottom:1px dashed #ccc;
		font-size: 12px;
	}
.teacher{
	width: 100%;
	height: 100%;
	background: rgba(239, 239, 239, 0.6901960784);
	overflow: hidden;
}
.teacherimg{
	text-align: center;
}
.teacherimg image{
	width: 75px;
	height: 75px;
	    border-radius: 50%;
}
.teacherlist{
	width: 47%;
	height: auto;
	
	box-sizing: border-box;
	background: #ffff;
	float: left;
	padding: 10px;
	box-sizing: border-box;
	margin-right: 10px;
	margin-bottom: 10px;
}
</style>
<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>